<template>
	<view class="page-e tn-safe-area-inset-bottom" style="width: 100%;">
		<!-- 顶部自定义导航开始 -->
		<view class="tn-navbg" :style="{height: vuex_custom_bar_height + 'px'}">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar fixed alpha customBack>
				<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
					<text class='icon tn-icon-left'></text>
					<text class='icon tn-icon-home-capsule-fill'></text>
				</view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
					<text class="tn-text-bold tn-text-xl tn-color-black">试题列表</text>
				</view>
			</tn-nav-bar>
		</view>
		<!-- 顶部自定义导航结束 -->
		<!-- 选择试题开始 -->
		<view class="exam-container" :style="{paddingTop: vuex_custom_bar_height + 'px'}" v-if="optionList.length > 0">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin-top: 0;">
				<view class="justify-content-item tn-text-bold tn-text-xl blue-title"
					style="margin-left: 30rpx;margin-bottom: 0rpx; margin-top: 10rpx;">
					单选试题
				</view>
			</view>
			<block v-for="(item, index) in optionList" :key="item.uid">
				<tn-list-view :title="index + 1 + '.' +item.title" :card="true" unlined="all" style="line-height: 50rpx;">
					<!-- 二级标题 -->
					<view style="padding-left: 30rpx;padding-right: 30rpx;" v-if="item.second_title.length > 0"><mp-html
							:content="item.second_title" /></view>
					<block v-for="(item1, index1) in item.option" :key="index1">
						<template v-if="getSelectBg(index, index1)">
							<view class="option-item-padding">
								<tn-list-cell :arrow="false"
									backgroundColor="#D6FADB">{{ optionSelectConfig[index1] + '.'+ item1.key2}}</tn-list-cell>
							</view>
						</template>
						<template v-if="!getSelectBg(index, index1)">
							<view class="option-item-padding">
								<tn-list-cell :arrow="false">{{ optionSelectConfig[index1] + '.'+ item1.key2}}</tn-list-cell>
							</view>
						</template>
					</block>
				</tn-list-view>
				<tn-button size="sm" backgroundColor="#CCA220" v-if="item.analysis.length > 0" fontColor="#fff"
					margin="10rpx 30rpx" @click="showAnalysisModal(1, index)">试题解析</tn-button>
			</block>
		</view>
		<!-- 选择试题结束 -->

		<!-- 判断试题开始 -->
		<view class="exam-container" v-if="optionList.length == 0 && judeList.length > 0"
			:style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<!-- 单选试题为空时，添加padding距离 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin-top: 0;">
				<view class="justify-content-item tn-text-bold tn-text-xl blue-title"
					style="margin-left: 30rpx;margin-bottom: 0rpx; margin-top: 10rpx;">
					判断试题
				</view>
			</view>
			<block v-for="(item, index) in judeList" :key="item.uid">
				<tn-list-view :title="index + 1 + '.' +item.title" :card="true" unlined="all">
					<block v-for="(item1, index1) in item.option" :key="index1">
						<template v-if="index1 == item.is_correct">
							<view class="option-item-padding">
								<tn-list-cell :arrow="false"
									backgroundColor="#D6FADB">{{ optionSelectConfig[item1.key1 - 1] + '.' + item1.option }}</tn-list-cell>
							</view>
						</template>
						<template v-if="index1 != item.is_correct">
							<view class="option-item-padding">
								<tn-list-cell
									:arrow="false">{{ optionSelectConfig[item1.key1 - 1] + '.' + item1.option }}</tn-list-cell>
							</view>
						</template>
					</block>
				</tn-list-view>
				<tn-button size="sm" backgroundColor="#CCA220" v-if="item.analysis.length > 0" fontColor="#fff"
					margin="10rpx 30rpx" @click="showAnalysisModal(2, index)">试题解析</tn-button>
			</block>
		</view>
		<view class="exam-container" v-if="optionList.length > 0 && judeList.length > 0"><!-- 单选试题不为空时，移除padding距离 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin-top: 0;">
				<view class="justify-content-item tn-text-bold tn-text-xl blue-title"
					style="margin-left: 30rpx;margin-bottom: 0rpx; margin-top: 10rpx;">
					判断试题
				</view>
			</view>
			<block v-for="(item, index) in judeList" :key="item.uid">
				<tn-list-view :title="index + 1 + '.' +item.title" :card="true" unlined="all">
					<block v-for="(item1, index1) in item.option" :key="index1">
						<template v-if="index1 == item.is_correct">
							<view class="option-item-padding">
								<tn-list-cell :arrow="false"
									backgroundColor="#D6FADB">{{ optionSelectConfig[item1.key1 - 1] + '.' + item1.option }}</tn-list-cell>
							</view>
						</template>
						<template v-if="index1 != item.is_correct">
							<view class="option-item-padding">
								<tn-list-cell
									:arrow="false">{{ optionSelectConfig[item1.key1 - 1] + '.' + item1.option }}</tn-list-cell>
							</view>
						</template>
					</block>
				</tn-list-view>
				<tn-button size="sm" v-if="item.analysis.length > 0" backgroundColor="#CCA220" fontColor="#fff"
					margin="10rpx 30rpx" @click="showAnalysisModal(2, index)">试题解析</tn-button>
			</block>
		</view>
		<!-- 判断试题结束 -->

		<!-- 问答列表开始 -->
		<view class="exam-container" v-if="optionList.length == 0 && judeList.length == 0 && readingList.length > 0"
			:style="{paddingTop: vuex_custom_bar_height + 'px'}"><!-- 单选和判断试题都为空时，添加padding距离 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin-top: 0;">
				<view class="justify-content-item tn-text-bold tn-text-xl blue-title"
					style="margin-left: 30rpx;margin-bottom: 0rpx; margin-top: 10rpx;">
					问答试题
				</view>
			</view>
			<block v-for="(item, index) in readingList" :key="index">
				<tn-list-view :card="true" unlined="all" style="line-height: 50rpx;">
					<tn-list-cell :arrow="false" @click="tn(index)" :fontSize="30"
						:backgroundColor="item.is_free == 2 ? '': '#E6E6E6'">{{index + 1 + "."}} {{item.title}}</tn-list-cell>
				</tn-list-view>
			</block>
		</view>
		<view class="exam-container" v-if="(optionList.length > 0 || judeList.length > 0) && readingList.length > 0">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin-top: 0;">
				<view class="justify-content-item tn-text-bold tn-text-xl blue-title"
					style="margin-left: 30rpx;margin-bottom: 0rpx; margin-top: 10rpx;">
					问答试题
				</view>
			</view>
			<block v-for="(item, index) in readingList" :key="index">
				<tn-list-view :card="true" unlined="all" style="line-height: 50rpx;">
					<tn-list-cell :arrow="false" @click="tn(index)" :fontSize="30"
						:backgroundColor="item.is_free == 1 ? '': '#E6E6E6'">{{index + 1 + "."}} {{item.title}}</tn-list-cell>
				</tn-list-view>
			</block>
		</view>
		<!-- 问答列表结束 -->

		<!-- 内容为空开始 -->
		<view class="" v-if="optionList.length == 0 && judeList.length == 0 && readingList.length==0">
			<view class="" style="padding: 25vh 20rpx;">
				<view class="tn-text-center" style="font-size: 200rpx;padding-top: 30rpx;">
					<text class="tn-icon-empty-page tn-color-gray--light"></text>
				</view>
				<view class="tn-color-gray--disabled tn-text-center tn-text-lg">该试题下暂无问答试题</view>
			</view>
		</view>
		<!-- 内容为空结束 -->

		<!-- 回到顶部悬浮按钮开始-->
		<view v-if="showNav">
			<nav-index-button></nav-index-button>
		</view>
		<!-- 回到顶部悬浮按钮结束 -->

		<!-- 显示试题解析开始 -->
		<view>
			<tn-popup v-model="showAnalysis" mode="center" width="96%" borderRadius="10" zoom="true" closeIconSize="40"
				closeIconColor="#E83A30" height="auto" closeBtn="true" safeAreaInsetBottom="true">
				<view style="padding: 10rpx 10rpx;"><mp-html :content="analysis" /></view>
			</tn-popup>
		</view>
		<!-- 显示试题解析结束 -->
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
	import {
		getReadingList,
		getOptionList,
		getJudeList
	} from "@/utils/api/exam.js"
	export default {
		name: 'TemplateProduct',
		mixins: [template_page_mixin],
		components: {
			NavIndexButton
		},
		data() {
			return {
				showAnalysis: false, // 显示试题解析弹窗
				analysis: "", // 试题解析内容
				showNav: false,
				readingList: [], // 阅读试题列表
				optionList: [], // 选择试题列表
				judeList: [], // 判断试题列表
				optionSelectConfig: ["A", "B", "C", "D", "E", "F", "G", "H"],
				searchWhere: {
					page: 1,
					size: 20,
					uid: ""
				},
				isVip: false,
			}
		},
		onLoad(params) {
			this.searchWhere.uid = params.uid
			this.$t.mpShare = {
				share: false,
			}
			if (!this.$t.mpShare.share) {
				uni.hideShareMenu()
			}
		},
		onShow() {
			this.getReadingList()
			//this.getOptionList()
			//this.getJudeList()
		},
		methods: {
			// 获取选择试题
			getOptionList() {
				getOptionList(this.searchWhere).then(res => {
					if (res.code == 100) {
						this.optionList = res.data
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			// 获取判断试题
			getJudeList() {
				getJudeList(this.searchWhere).then(res => {
					if (res.code == 100) {
						this.judeList = res.data
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			// 获取阅读试题
			getReadingList() {
				getReadingList(this.searchWhere).then(res => {
					if (res.code == 100) {
						this.readingList = res.data.items
						this.searchWhere.page = res.data.page
						this.searchWhere.size = res.data.size
						this.isVip = true
					} else {
						this.$func.showToast(res.msg)
					}
				})
			},
			tn(e) {
				let detail = this.readingList[e]
				if (detail.is_free == 1 && !this.isVip) {
					uni.showModal({
						title: "操作提示",
						content: "会员试题，请先开通会员",
						confirmText: "立即开通",
						cancelText: "暂不开通",
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/subpages/user/member/describe"
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/subpages/exam/reading/detail?uid=" + detail.uid
					})
				}
			},
			// 判断单选题是否为答案
			getSelectBg(index, optionIndex) {
				let optionLable = this.optionSelectConfig[optionIndex]
				return this.optionList[index].answer.includes(optionLable)
			},
			// 查看试题解析
			showAnalysisModal(type, index) {
				this.showAnalysis = true
				if (type == 1) {
					this.analysis = this.optionList[index].analysis
					return
				}
				this.analysis = this.judeList[index].analysis
			},
		},
		onPageScroll(e) {
			if (e.scrollTop > 500) {
				this.showNav = true
			} else {
				this.showNav = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 选择题选项间距
	.option-item-padding {
		padding: 0 30rpx;
		margin: 0 0 12rpx 0;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}
	// 胶囊结束

	/* 顶部渐变*/
	.tn-navbg {
		background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
		/* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
		/* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
		/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	// 顶部渐变结束
	// 试题导航开始
	.blue-title::before {
		content: "";
		position: absolute;
		display: block;
		width: 80rpx;
		height: 26rpx;
		background: #269EFC;
		margin-top: 24rpx;
		margin-left: 75rpx;
		opacity: 0.3;
		z-index: -1;
		border-radius: 4rpx;
	}

	// 试题导航结束

	// 试题答案背景色开始
	.is-answer {
		background-color: #00F5D4 !important;
	}

	// 试题答案背景色结束
</style>